<template>
	<view class="container">
		<div class="article_box">
			<div class="user_info">
				<div class="avatar">
					<image src="../../../static/postImage/1731832574917.jpg" mode=""></image>
				</div>
				<div class="name_box">
					<span>{{postDetails?.employee?.name}}</span>
					<span v-if="postDetails.employee?.type == 1">管理员</span>
					<span v-if="postDetails.employee?.type == 2">用户</span>
					<span v-if="postDetails.employee?.type == 3">医生</span>

				</div>
				<div class="type_box" v-if="isShowLike">
					<span v-if="!isLike" class="pre-book already">点赞</span>
					<span v-else class="pre-book gives">已点赞</span>
				</div>
			</div>
			<!-- 文章内容区域 -->
			<div class="article_content">
				<div class="title">
					{{postDetails.forum?.postTitle}}
				</div>
				<div class="content">
					{{postDetails.forum?.postContent}}
				</div>

				<!-- 文章图片展示 -->
				<div class="images" v-if="postDetails?.forum?.images">
					<image v-for="(url,index) in postDetails?.forum?.images" :key="index" :src="url" mode=""></image>


				</div>
				<div class="created">
					{{ stringSlicing(postDetails.forum?.createTime || "")}}
				</div>
			</div>
		</div>
		<!-- 评论列表 -->
		<view class="comment_list" v-if="commentList.length">
			<div class="title">评论展示</div>
			<div class="comment_box" v-for="(item,index) in commentList" :key="index">
				<!-- 头像信息 -->
				<div class="user_info">
					<div class="avatar">
						<image src="../../../static/postImage/1731832574917.jpg" mode=""></image>
					</div>
					<div class="name_box">
						<span>{{item.user?.name}}</span>
						<span v-if="item.user?.type == 1">管理员</span>
						<span v-if="item.user?.type == 2">用户</span>
						<span v-if="item.user?.type == 3">医生</span>

					</div>
					<div class="type_box">
						<image @click="likeComment(item,true)" v-if="!item.like" src="../../static/喜欢.png" mode="">
						</image>
						<image @click="likeComment(item,false)" v-else src="../../static/喜欢2.png" mode=""></image>

					</div>
				</div>
				<!-- 评论展示 -->
				<div class="comment_text">
					&nbsp;&nbsp;&nbsp;&nbsp;{{item.criticize?.criticizeContent}}
				</div>
				<!--展示评论时间 -->
				<div class="created">

					{{ stringSlicing(item.criticize?.createTime)}}
				</div>
			</div>
		</view>
		<view v-else class="">
			<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></up-empty>
		</view>
	</view>
	<!-- 评论框 -->
	<view class="comment">
		<div class="input">
			<input v-model="commentValue" placeholder="请注意友好发言,保护社区网络环境,人人有责" type="text">
		</div>
		<div class="btn" @click="handleOk">
			<div class="text">
				发 送
			</div>
		</div>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';

	import {
		apiGetForumDetails,
		apiGetCriticizeList,
		apiDropLike,
		apiAddCriticize
	} from "@/api/forum.js"

	const userInfo = ref()
	const commentValue = ref("")

	const isLike = ref(false)
	//帖子id
	const postId = ref(null)
	//帖子详细
	const postDetails = ref({})

	//评论列表
	const commentList = ref([])

	//喜欢或者不喜欢评论
	const likeComment = async (item, type) => {
		item.like = type
		await apiDropLike({
			isLike: type,
			criticizeId: item.criticize.criticizeId,
			userId: userInfo.value.empId,
			Type: 2
		})
	}

	const stringSlicing = (str) => {
		return str.split('T')[0] + ' ' + str.split('T')[1]
	}

	// 提交评论
	const handleOk = async () => {
		if (commentValue.value == "") {
			return uni.showToast({
				title: '不能发布空消息',
				icon: "none",
				duration: 1000
			});
		}
		//
		try {
			await apiAddCriticize({
				postId: postId.value,
				userId: userInfo.value.empId,
				criticizeContent: commentValue.value,
			})
			await getInfo()
			uni.showToast({
				title: '发布成功',
				icon: "success",
				duration: 1000
			});

		} catch (error) {
			uni.showToast({
				title: '评论失败',
				icon: "error",
				duration: 1000
			});
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)
		}
		commentValue.value = ""
	}



	//进入详情页面发送获取请求
	const getInfo = async () => {
		//获取帖子详情
		let res = await apiGetForumDetails(postId.value)
		postDetails.value = res.data
		if(postDetails.value.forum.images.length != 0){
			postDetails.value.forum.images = JSON.parse(postDetails.value.forum.images)
		}

		let result = await apiGetCriticizeList({
			userId: userInfo.value.empId,
			postId: postId.value
		})
		commentList.value = result.data
	}

	const isShowLike = ref(false)

	onLoad(async (option) => {
		if (option.isShowLike) {
			isShowLike.value = true
		}
		postId.value = option.postId
		isLike.value = option.isLike
		let user = await uni.getStorage({
			key: "empleyeeInfo"
		})
		userInfo.value = user.data
		getInfo()
	})
</script>


<style lang="scss" scoped>
	.comment {
		z-index: 999;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		height: 100rpx;
		background-color: #f5b017;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.input {
			width: 80%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			input {
				width: 100%;
				height: 60rpx;
				background-color: #fff;
				padding-left: 10rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
			}
		}

		.btn {
			width: 20%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;

			.text {
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				background-color: #fa6d2b;
				color: #fff;
			}
		}
	}

	.container {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;

		.comment_list {
			width: 100%;
			// height: 1000rpx;
			// background-color: red;
			border: 2rpx solid #eee;
			border-radius: 20rpx;
			margin-top: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			padding-bottom: 100rpx;

			.title {
				font-size: 42rpx;

			}

			.comment_box {
				border-bottom: 2rpx solid #eee;
				padding: 20rpx 0;
				box-sizing: border-box;

				.created {
					margin-top: 10rpx;
					color: #999;
				}

				.comment_text {

					word-wrap: break-word;
					word-break: break-all;
					font-size: 30rpx;
				}

				.user_info {
					width: 100%;
					height: 120rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.type_box {
						image {
							width: 50rpx;
							height: 50rpx;
						}
					}

					image {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
					}

					.name_box {
						display: flex;
						flex: 1;
						justify-content: flex-start;
						padding-left: 20rpx;
						box-sizing: border-box;
						flex-direction: column;

						label:nth-child(1) {
							font-size: 30rpx;
						}
					}

					.pre-book {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 150rpx;
						height: 60rpx;
						border-radius: 40rpx;
						color: #fff;
					}


					.already {
						background-color: #dd0407;
					}


				}
			}
		}

		.article_box {
			// height: 400rpx;
			background-color: #f3f3f3;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: box-sizing;

			.images {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				image {
					width: 24%;
					margin: 10px 12px 0 0;
					height: 100px;
					border-radius: 8px;

				}

			}

			.article_content {
				width: 100%;

				.created {
					margin-top: 10rpx;
					color: #999;
				}

				.title {
					font-size: 42rpx;
					width: 100%;
					height: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-bottom: 20rpx;
				}

				.content {

					word-wrap: break-word;
					word-break: break-all;
					font-size: 30rpx;
				}
			}

			.user_info {
				width: 100%;
				height: 120rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.name_box {
					display: flex;
					flex: 1;
					justify-content: flex-start;
					padding-left: 20rpx;
					box-sizing: border-box;
					flex-direction: column;

					label:nth-child(1) {
						font-size: 30rpx;
					}
				}

				.pre-book {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 150rpx;
					height: 60rpx;
					border-radius: 40rpx;
					color: #fff;
				}

				.already {
					background-color: #dd0407;
				}

				.gives {
					z-index: 999;
					background-color: #f5690b !important;
				}

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}
		}
	}
</style>
